<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!--<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />-->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="viewport" content="width=1024px, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    
    <title>Spina</title>
    
    <!-- Stylesheets -->
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/icons.css" />
    <link rel="stylesheet" href="css/formalize.css" />
    <link rel="stylesheet" href="css/checkboxes.css" />
    <link rel="stylesheet" href="css/sourcerer.css" />
    <link rel="stylesheet" href="css/jqueryui.css" />
    <link rel="stylesheet" href="css/tipsy.css" />
    <link rel="stylesheet" href="css/calendar.css" />
    <link rel="stylesheet" href="css/tags.css" />
    <link rel="stylesheet" href="css/selectboxes.css" />
    <link rel="stylesheet" href="css/960.css" />
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" media="all and (orientation:portrait)" href="css/portrait.css" />
    <link rel="apple-touch-icon" href="apple-touch-icon-precomposed.png" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/excanvas.js"></script>
    <![endif]-->
    
    <!-- JavaScript -->
    <script src="js/jquery.min.js"></script>
    <script src="js/jqueryui.min.js"></script>
    <script src="js/jquery.cookies.js"></script>
    <script src="js/jquery.pjax.js"></script>
    <script src="js/formalize.min.js"></script>
    <script src="js/jquery.metadata.js"></script>
    <script src="js/jquery.validate.js"></script>
    <script src="js/jquery.checkboxes.js"></script>
    <script src="js/jquery.chosen.js"></script>
    <script src="js/jquery.fileinput.js"></script>
    <script src="js/jquery.datatables.js"></script>
    <script src="js/jquery.sourcerer.js"></script>
    <script src="js/jquery.tipsy.js"></script>
    <script src="js/jquery.calendar.js"></script>
    <script src="js/jquery.inputtags.min.js"></script>
    <script src="js/jquery.wymeditor.js"></script>
    <script src="js/jquery.livequery.js"></script>
    <script src="js/jquery.flot.min.js"></script>
    <script src="js/application.js"></script>
  </head>
  
  <body>
  <div id="overlay"><div id="modalcontainer"></div></div>
	<script>
	$(document).ready(function() {
		//Laad standaard het bashboard
		$('#main').fadeOut('fast', function() {
			$('#main').load('./pages/dashboard.php', function() {
				$('#main').fadeIn('fast');
			});
		});
		
		
	    $('#primary ul li a').click(function(e) {
	  		// voorkom dat de link gevolgd wordt
	    	e.preventDefault(); 
	    	var link =$(this).attr("href");
	    	if(link != "#"){
	    		$('#secondary').fadeOut('fast');
	        	//laad de pagina in  #Main container
	        	$('#main').fadeOut('fast', function() {
	        		$('#main').load(link, function() {
	        			$('#main').fadeIn('fast');
	        		});
	        	});
	        	$("#primary ul li").removeClass("active");
	        	$(this).parent().addClass("active");	
	        }else{
	        	alert('Sorry maar deze pagina bestaat nog niet');
	        }
	    });
	});
	</script>
    <!-- Primary navigation -->
    <nav id="primary">
      <ul>
        <li class="active">
          <a href="./pages/dashboard.php">
            <span class="icon32 dashboard"></span>
            Dashboard
          </a>
        </li>
        <li>
          <a href="./pages/docenten.php">
            <span class="icon32 user"></span>
            Docenten
          </a>
        </li>
        <li>
          <a href="./pages/leerlingen.php">
            <span class="icon32 leerling"></span>
            Leerlingen
          </a>
        </li>
        <li>
          <a href="./pages/klassen.php">
            <span class="icon32 listicon"></span>
            Klassen
          </a>
        </li>
        <li>
          <a href="./pages/settings.php">
            <span class="icon32 tools"></span>
            Instellingen
          </a>
        </li>
        <li class="bottom">
          <a href="#">
            <span class="icon32 quit"></span>
            Log out
          </a>
        </li>
      </ul>
     </nav>
    <nav id="secondary" style="display:none;">
      
      <div id="notifications">
        <ul>
        </ul>
      </div>
    </nav>
    
    <section id="maincontainer">
      <div id="main" class="container_12">
        <!-- Main Area Here -->

      
      </div>
    </section>
  </body>
</html>